<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作Html元素属性(二)——css操作</title>
    <style type="text/css">
        .initDiv{
            display: block;
            width: 100px;
            height: 100px;
            color: greenyellow;
        }
        .selected{
            background-color: red;

        }
        .test{
            width: 500px;
            height: 100px;
            border: 5px solid lawngreen;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>jQuery为Html元素添加、移除、切换css样式</legend>
        <div class="initDiv" id="testDiv">
            我是div1
        </div>
        <button id="btnAddClass">为div元素加上 'selected' 类</button>
        <button id="btnRemoveClass">从div元素中删除 'selected' 类</button>
        <button id="btnToggleClass">如果存在就删除,否则就添加</button>
    </fieldset>
    <fieldset>
        <legend>jQuery修改Html元素的css样式</legend>
        <div class="initDiv" id="testDiv2">
            我是div2
        </div>
        <button id="btnViewCss">访问查看div元素的color属性</button>
        <button id="btnSetCss1">设置div元素的color属性为red</button>
        <button id="btnSetCss2">设置p元素的color为blue，background属性为yellow</button>
    </fieldset>
</body>

<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
     *      //页面加载完成后的处理，固定写法
     * });
     *
     */
    $(function () {
        $("#btnAddClass").click(function () {
            //为id为testDiv的div添加selected类样式
            $("#testDiv").addClass("selected");
            //判断testDiv是否存在selected这个class，如果存在返回值为true，如果不存在返回false
            console.log($("#testDiv").hasClass("selected"));
            //$("#testDiv").addClass("selected test");//为div添加多个样式
            //$("#testDiv").addClass("selected").addClass("test");//链式调用，为div添加多个样式
        });
        $("#btnRemoveClass").click(function () {
            //移除id为testDiv的div添加selected类样式
            $("#testDiv").removeClass("selected");
            console.log($("#testDiv").hasClass("selected"));
            //$("#testDiv").removeClass("selected test");//移除div的多个样式
            //$("#testDiv").removeClass("selected").removeClass("test");//链式调用，移除div的多个样式
        });
        $("#btnToggleClass").click(function () {
            //如果id为testDiv的div存在selected类样式，那么就删除，如果不存在，那么就添加
            $("#testDiv").toggleClass("selected");
            console.log($("#testDiv").hasClass("selected"));
            //$("#testDiv").toggleClass("selected test");
            //$("#testDiv").toggleClass("selected").toggleClass("test");
        });

        $("#btnViewCss").click(function () {
            var css = $("#testDiv2").css("color");//访问查看元素的color属性
            console.log(css);
        });
        $("#btnSetCss1").click(function () {
            $("#testDiv2").css("color","red");//设置元素的color属性为red
        });
        $("#btnSetCss2").click(function () {
            $("#testDiv2").css({"color": "blue", "background": "yellow"});//设置元素的color属性为blue，background属性为yellow，设置多个属性要用{}字典形式
        });
    });
    
</script>
</html>